<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<base href="<%=basePath%>">
<head>
<meta charset="UTF-8">
<title>user-home</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/user-home.css">
<link rel="stylesheet" href="css/bootstrapValidator.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-paginator.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/user-home.js"></script>
<script src="js/header.js"></script>
<script src="js/zh_CN.js"></script>
</head>
<body>
	<div id="box">
		<div id="header">
			<jsp:include page="common/header.jsp" flush="true" />
			<!--  nav导航栏
        <nav class="navbar navbar-inverse  navbar-fixed-top" role="navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#a">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">PETCLUB</a>
                </div>
                <div>
                    <ul class="nav navbar-nav collapse navbar-collapse" id="a">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">市场</a></li>
                        <li><a href="#">论坛</a></li>
                        <li><a href="#">我的家园</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="glyphicon glyphicon-user"></i> 个人中心 <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" style="background-color: ghostwhite">
                                <li class="" style=""><a href="#"><i class="glyphicon glyphicon-log-in"></i>&nbsp;&nbsp;登录</a>
                                </li>
                                <li class="divider"></li>
                                <li class="" style=""><a href="#"><i class="glyphicon glyphicon-registration-mark"></i>&nbsp;&nbsp;登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>


                </div>
            </div>
        </nav> -->
			<!--附加导航栏-->
			<div class="container-fluid" style="">
				<div class="row">
					<div class="col-md-2" style="padding-top: 1.6%">
						<a href="#" style="padding: 0 15%" class=""><img
							src="images/PETCLUB2.png" alt=""></a>
						<!-- <div class="left">
							<ul class="list-unstyled"
								style="padding-top: 5%; padding-left: 25%">
								<li class=""><h3
										style="background: lightsteelblue; width: 70%">快速导航</h3></li>
								<li style="padding-left: 12%"><a href="http://localhost:8080/distribute-portal/userhome/user-home.html">个人信息</a></li>
								<li style="padding-left: 12%"><a href="#">修改密码</a></li>
								<li style="padding-left: 12%"><a href="#">修改资料</a></li>
								<li style="padding-left: 12%"><a href="http://localhost:8080/distribute-portal/collection/collection.html">我的收藏</a></li>
								<li style="padding-left: 12%"><a href="#">我的申请</a></li>
							</ul>
						</div> -->
					</div>
					<div class="col-md-7" style="padding-top: 2%">
						<ul id="myTab" class="nav nav-tabs nav-pills">
							<li class="active"><a href="#home" data-toggle="tab"> 主页
							</a></li>
						<!-- 	<li><a href="#collection" data-toggle="tab">我的收藏</a></li> -->
							<li><a class="lk-apply"
								href="http://localhost:8080/distribute-portal/order/order-list/${currentUser.id}.html?page=1">我的申请</a></li>
							<li class="dropdown"><a href="#" id="myTabDrop1"
								class="dropdown-toggle" data-toggle="dropdown">账户设置 <b
									class="caret"></b>
							</a>
								<ul class="dropdown-menu" role="menu"
									aria-labelledby="myTabDrop1">
									<li><a href="#" data-toggle="modal" id="minfo"
										data-target="#mInfoModal">修改个人资料</a></li>
									<li><a href="#" data-toggle="modal" id="mpass"
										data-target="#mPassModal">修改密码</a></li>
								</ul></li>
						</ul>
						<div id="myTabContent" class="tab-content"
							style="background: gainsboro">
							<div class="tab-pane fade in active" id="home">
								<div class="panel panel-default">
									<div class="panel-heading">
										<i class="glyphicon glyphicon-user"
											style="font-size: 280%; padding-top: 2%"></i>

										<div>
											<p style="font-size: 120%; padding-left: 0.5%">${currentUser.username}</p>
										</div>
									</div>
									<div class="panel-body">
										<h5 style="color: blue">您的个人信息：</h5>
										<div>
										
											<ul class="list-inline" style="list-style: none">
												<li><i class="glyphicon glyphicon-phone">手机号码：${currentUser.phone}</i></li>
												<li><i class="glyphicon glyphicon-envelope">邮箱地址：${currentUser.email}</i></li>
											</ul>
											<ul class="" style="list-style: none">
												<li><i class=" glyphicon glyphicon-paperclip">创建时间：${currentUser.created}</i></li>
												<li><i class="glyphicon glyphicon-paperclip">上次修改：${currentUser.updated}</i></li>
											</ul>
										</div>


									</div>
								</div>
							</div>
		<!-- 					<div class="tab-pane fade" id="collection">
								<div class="panel panel-default">
									<div class="panel-heading" style="">
										<h5 style="">
											<i class="glyphicon glyphicon-gift"></i>全部收藏
										</h5>
									</div>
									<div class="panel-body">
										<div class="col-md-4">
											<ul style="border-bottom: 2px solid gainsboro">
												<li style="background: white; padding: 5%;"><span><a
														style="text-decoration: none" href="#"
														class="glyphicon glyphicon-remove"></a><img
														style="border: 2px solid gainsboro"
														src="images/dog4cl.jpg" alt=""></span></li>
												<li style="padding-left: 5%">名字：</li>
												<li style="padding-left: 5%">类别：</li>
												<li style="padding-left: 5%">当前状态：</li>
											</ul>
										</div>
										<div class="col-md-4">
											<ul style="border-bottom: 2px solid gainsboro">
												<li style="background: white; padding: 5%;"><span><a
														style="text-decoration: none" href="#"
														class="glyphicon glyphicon-remove"></a><img
														style="border: 2px solid gainsboro"
														src="images/dog4cl.jpg" alt=""></span></li>
												<li style="padding-left: 5%">名字：</li>
												<li style="padding-left: 5%">类别：</li>
												<li style="padding-left: 5%">当前状态：</li>
											</ul>
										</div>
										<div class="col-md-4">

											<ul style="border-bottom: 2px solid gainsboro">
												<li style="background: white; padding: 5%;"><span><a
														style="text-decoration: none" href="#"
														class="glyphicon glyphicon-remove"></a><img
														style="border: 2px solid gainsboro"
														src="images/dog4cl.jpg" alt=""></span></li>
												<li style="padding-left: 5%">名字：</li>
												<li style="padding-left: 5%">类别：</li>
												<li style="padding-left: 5%">当前状态：</li>
											</ul>
										</div>
										<div class="col-md-4">

											<ul style="border-bottom: 2px solid gainsboro">
												<li style="background: white; padding: 5%;"><span><a
														style="text-decoration: none" href="#"
														class="glyphicon glyphicon-remove"></a><img
														style="border: 2px solid gainsboro"
														src="images/dog4cl.jpg" alt=""></span></li>
												<li style="padding-left: 5%">名字：</li>
												<li style="padding-left: 5%">类别：</li>
												<li style="padding-left: 5%">当前状态：</li>
											</ul>
										</div>

									</div>
									<div class="panel-footer ">
										<div class=" " style="padding: 0 30%">
											<ul class="pagination pagination-md " style="">
												<li><a href="#">&laquo;</a></li>
												<li><a href="#">1</a></li>
												<li><a href="#">2</a></li>
												<li><a href="#">3</a></li>
												<li><a href="#">4</a></li>
												<li><a href="#">5</a></li>
												<li><a href="#">&raquo;</a></li>
											</ul>

										</div>
									</div>
								</div>
							</div> -->
							<div class="tab-pane fade" id="myApply">
								<!--   <script>
	                        var orderList = JSON.parse("${myOrderList}");
	                    	for(order in orderList){
	                    		alert(order.title);
	                    	}
                        </script> -->

							</div>
							<div class="tab-pane fade" id="userInfo"
								style="padding: 2%; width: 100%; background: ghostwhite">
								<p style="padding-right: 5%">
									您的基础信息<a href="#" class="pull-right btn btn-info">修改个人资料</a>
								</p>
								<div class="info" style="padding: 2%">
									<ul>
										<li class="input-group"><span class="input-group-addon">姓名：</span><input
											class="form-control" type="text" value="xxx" readonly></li>
										<li class="input-group"><span class="input-group-addon">手机：</span><input
											class="form-control" type="text" value="xxx" readonly></li>
										<li class="input-group"><span class="input-group-addon">邮箱：</span><input
											class="form-control" type="text" value="xxx" readonly></li>
										<li class="input-group"><span class="input-group-addon">地址：</span>
											<textarea class="form-control" value="xxx" readonly></textarea></li>
									</ul>
									<p style="padding: 3%; text-align: center">
										<a href="#" class="btn btn-info">取消</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
											href="#" class=" btn btn-info">提交</a>
									</p>
								</div>
							</div>
							<div class="tab-pane fade" id="ejb">
								<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性
									和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
							</div>
						</div>
					</div>
					<div class="col-md-3" style="">
						<!-- <div class="form-group" style="position: absolute;top:50%;transform:translateY(-50%); ">
                         <input class="search" type="text" list="list" name="search" title="I am looking for..."
                                value="I am looking for... " style="width: 350px">
                         <input type="submit" name="submit">
                     </div>-->
						<div class="input-group " style="padding-top: 1.4%;">
							<input class="form-control searchInput" type="text" list="list"
								placeholder="I am looking for..."> <span
								class="input-group-btn">
								<button class="btn btn-default searchBtn" type="submit">
									<i class="glyphicon glyphicon-search"></i>
								</button>
							</span>
						</div>
						<datalist id="list">
							<option>宠物猫</option>
							<option>宠物狗</option>
						</datalist>
					</div>
				</div>
			</div>
		</div>

	</div>


	<!-- 个人信息模态框 -->
	<!-- 模态框（Modal） -->
	<div>
		<div class="modal fade myModal" id="mInfoModal" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div>
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">
								<b>修改个人信息</b>
							</h4>
						</div>
						<div class="modal-body row">
							<div class="panel panel-default">
								<div class="panel-body well" style="">
									<form method="post" id="iForm">
										<div class="form-group">
											<div class="input-group">
												<span class="input-group-addon"><i
													class="glyphicon glyphicon-user"></i></span><input
													class="form-control userName" id="musername" type="text"
													name="userName" placeholder="用户名" readonly="readonly" />
											</div>
										</div>
										<div class="form-group">
											<div class="input-group ">
												<span class="input-group-addon"><i
													class="glyphicon glyphicon-phone"></i></span><input
													class="form-control" id="mphone" type="text" name="phone"
													placeholder="手机号码" />
											</div>
										</div>
										<div class="form-group">
											<div class="input-group">
												<span class="input-group-addon"><i
													class="glyphicon glyphicon-envelope"></i></span><input
													class="form-control" id="memail" type="text" name="email"
													placeholder="email" />
											</div>
										</div>
										<div class="form-group">
											<div class="input-group">
												<input
													class="form-control" id="token" type="hidden" name="token" 
													placeholder=""  />
											</div>
										</div>


									</form>

								</div>
							</div>
							<div class="modal-footer">
								<div class="">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">取消</button>
									<button type="button" class="btn btn-primary isubmit">确定</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 模态框（Modal） -->
	<div>
		<div class="modal fade myModal" id="mPassModal" tabindex="-1"
			role="dialog" aria-labelledby="myModalLabelTwo" aria-hidden="true">

			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabelTwo">
							<b>修改密码</b>
						</h4>
					</div>
					<div class="modal-body row">
						<div class="">
							<div class="panel panel-default">
								<div class="panel-body well">

									<form method="post" id="pForm">
										<div class="form-group">
											<div class="input-group">
												<span class="input-group-addon"><i
													class="glyphicon glyphicon-user"></i></span><input
													class="form-control userName" id="username" type="text"
													name="userName" placeholder="用户名" readonly="readonly" />
											</div>
										</div>
										<div class="form-group">
											<div class="input-group ">
												<span class="input-group-addon"><i
													class="glyphicon glyphicon-lock"></i></span><input
													class="form-control" id="pwd" type="password"
													name="opassword" onpaste="return  false" autocomplete="off"
													placeholder="旧密码" />
											</div>
										</div>
										<div class="form-group">
											<div class="input-group">
												<span class="input-group-addon"><i
													class="glyphicon glyphicon-lock"></i></span><input
													class="form-control" id="npwd" type="password"
													name="password" onpaste="return  false" autocomplete="off"
													placeholder="新密码" />
											</div>
										</div>
										<div class="form-group">
											<div class="input-group">
												<span class="input-group-addon"><i
													class="	glyphicon glyphicon-repeat"></i></span><input
													class="form-control" id="npwdRepeat" type="password"
													name="cpassword" onpaste="return  false" autocomplete="off"
													placeholder="确认新密码" />
											</div>

										</div>
									</form>

								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">取消</button>
								<button type="button" class="btn btn-primary psubmit">确定</button>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
	function centerModals() {
		$('.myModal').each(
				function(i) {
					$(this).find('.userName').attr("value",
							"${currentUser.username}");
					/* $(this).find('form')[0].reset(); */
					var $clone = $(this).clone().css('display', 'block')
							.appendTo('body');
					var top = Math.round(($clone.height() - $clone.find(
							'.modal-content').height()) / 2);
					top = top > 0 ? top : 0;
					$clone.remove();
					$(this).find('.modal-content').css("margin-top", top);
				});
	};
	$('.myModal').on('show.bs.modal', centerModals);
	//Modal验证销毁重构
	$('.myModal').on('hidden.bs.modal', function() {
		$(this).find('form')[0].reset();
		$(this).find('.userName').attr("value", "${currentUser.username}");
		$(this).find("form").data('bootstrapValidator').destroy();
		$(this).find("form").data('bootstrapValidator', null);
		formValidator();
	});
	/* $('.myModal').on("hidden.bs.modal", function(){
		$(this).find('form')[0].reset();
		$(this).find("form").data('bootstrapValidator').resetForm();
		 $("#iForm").data('bootstrapValidator').resetForm();
		
		 $(this).removeData("bs.modal"); 
	}); */

	//禁用空白处点击关闭
	$('.myModal').modal({
		backdrop : 'static',
		keyboard : false,//禁止键盘
		show : false
	});
	//页面大小变化是仍然保证模态框水平垂直居中
	$(window).on('resize', centerModals);

	/* --------------------------- */
	function formValidator() {
		$('#pForm').bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				userName : {
					message : '用户名验证失败',
					validators : {
					/* notEmpty : {
						message : '用户名不能为空'
					},
					stringLength : {
						min : 3,
						max : 18,
						message : '用户名长度必须在3到18位之间'
					},
					regexp : {
						regexp : /^[a-zA-Z0-9_]+$/,
						message : '用户名只能包含大写、小写、数字和下划线'
					}*/
					}
				},
				opassword : {
					validators : {
						notEmpty : {
							message : '密码不能为空！'
						},
						stringLength : {
							min : 6,
							max : 18,
							message : '密码长度必须在6到18位之间'
						},
						threshold : 6 ,
						remote:{
							url:'userhome/checkPass.action',
							data: function(validator) {
	                               return {
                            	   	userName:'${currentUser.username}',
   									password:$('input[name="opassword"]').val(),
   									token: $.cookie("TT_TOKEN"),
	                               };
							},
							message:'密码有误',
							delay :  1000,
							type: 'POST'
						},
						
					}
				},
				password : {
					validators : {
						notEmpty : {
							message : '密码不能为空！'
						},
						stringLength : {
							min : 6,
							max : 18,
							message : '密码长度必须在6到18位之间'
						},
						different : {
							field : 'username',
							message : '密码不能与用户名一样'
						}
					}
				},
				cpassword : {
					validators : {
						notEmpty : {
							message : '请再次确认密码'
						},
						identical : {
							field : 'password',
							message : '两次输入的密码不一致'
						},
					}
				},
			},
			submitHandler : function(validator, form, submitButton) {

			}

		});
		$('#iForm').bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				userName : {
					message : '用户名验证失败',
					validators : {
					/* notEmpty : {
						message : '请输入用户名'
					},
					stringLength : {
						min : 3,
						max : 18,
						message : '用户名长度必须在3到18位之间'
					},
					regexp : {
						regexp : /^[a-zA-Z0-9_]+$/,
						message : '用户名只能包含大写、小写、数字和下划线'
					} */
					}
				},
				phone : {
					validators : {
						notEmpty : {
							message : '请输入手机号码！'
						},
						phone : {
							message : '手机号码格式有误',
							country : 'CN'
						},
					}
				},
				email : {
					validators : {
						notEmpty : {
							message : '请输入email'
						},
						emailAddress : {
							message : '邮箱地址格式有误'
						}
					}
				}
			},
			submitHandler : function(validator, form, submitButton) {

			}
		});

	}

	$(function() {

		formValidator();

		/* 	$(".lk-apply")
					.click(
							function() {
								$
										.ajax({
											url : "http://localhost:8080/distribute-portal/order/order-list/${currentUser.id}.html?page=1",
											success : function(data) {
											}
										});
							}); */

		/* 		//设置分页插件
		 var element = $('#pg-element');
		 options = {
		 bootstrapMajorVersion : 3, //对应的bootstrap版本
		 currentPage : '${page }', //当前页数，这里是用的EL表达式，获取从后台传过来的值
		 numberOfPages : 10, //每页页数
		 totalPages : '${totalPages }', //总页数，这里是用的EL表达式，获取从后台传过来的值
		 shouldShowPage : true,//是否显示该按钮
		 itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
		 switch (type) {
		 case "first":
		 return "首页";
		 case "prev":
		 return "上一页";
		 case "next":
		 return "下一页";
		 case "last":
		 return "末页";
		 case "page":
		 return page;
		 }
		 },
		 //点击事件
		 onPageClicked : function(event, originalEvent, type, page) {
		 location.href = "search.html?q=" + "${query}&page=" + page;
		 }
		 };
		 element.bootstrapPaginator(options); */
		$("#iForm").submit(function(ev) {
			ev.preventDefault();
		});
		$("#pForm").submit(function(ev) {
			ev.preventDefault();
		});
		$(".isubmit").on("click", function() {
			var bootstrapValidator = $("#iForm").data('bootstrapValidator');
			bootstrapValidator.validate();
			if (bootstrapValidator.isValid()) {
				/*  $("#yourform").submit(); */
				$("#token").attr("value",$.cookie("TT_TOKEN"));
				alert("isubmit");
				$
						.post(
								'http://localhost:8080/distribute-portal/userhome/change/userInfo.action',
								$("#iForm").serialize(),
								function(data) {
									if (data.status == 200) {
										alert('修改成功！');
										window.location.reload();
									} else {
										alert("修改失败！");
									}
								});
			}

			else
				return;

		});
		$(".psubmit")
				.on(
						"click",
						function() {
							var bootstrapValidator = $("#pForm").data(
									'bootstrapValidator');
							bootstrapValidator.validate();
							if (bootstrapValidator.isValid()) {
								/*  $("#yourform").submit(); */
								alert("psumit");
								$("#pwd").attr(
										"disabled",
										"true");
								$("#npwdRepeat").attr(
										"disabled",
										"true");
								$
										.post(
												'http://localhost:8080/distribute-portal/userhome/change/userPass.action',
												$("#pForm").serialize(),
												function(data) {
													if (data.status == 200) {
														$("#pwd").attr(
																"disabled",
																"false");
														$("#npwdRepeat ").attr(
																"disabled",
																"false");
														alert('修改成功！');
														window.location.reload();
														
													} else {
														alert("修改失败！");
													}
												});
							}

							else
								return;

						});
	});
</script>
</html>